/*
 * @Author: hyman
 * @Date: 2022-02-10 10:50:17
 * @LastEditors: hyman
 * @LastEditTime: 2022-02-12 15:40:01
 * @Description: 请填写简介
 */
import React from 'react'
import styles from './userindex.scss'
import {NavLink, useNavigate} from 'react-router-dom'
import { Modal } from 'antd-mobile'
import cookie from 'react-cookies'

const Baseindex = () => 
{

    let navigate = useNavigate()

    const [closeOnAction, setcloseOnAction] = React.useState(false)

    const LoginUser = cookie.load('LoginUser') ? cookie.load('LoginUser') : {}
    
    const logout = () =>{
        setcloseOnAction(true)
    }
    const handleCancelClick = (e)  => {
        setcloseOnAction(false)
        if (e.key === 'confirm') {
            cookie.remove('LoginUser')
            navigate('/user/base/login')
        }
    }

    return (
        <>
            {/* <!-- 用户信息 --> */}
            <div className="user">
                <div className="avatar wow fadeInUp">
                    <img src={LoginUser.avatar} />
                </div>

                <div className="nickname wow fadeInUp" data-wow-delay="100ms">{LoginUser.nickname}</div>

                {LoginUser ? '' : 
                <NavLink to="/user/base/login">
                    <div className="login wow fadeInUp" data-wow-delay="200ms"> 登陆</div>
                </NavLink>}
                
            </div>

            {/* <!-- 菜单 --> */}
            <div className="menulist wow fadeInUp" data-wow-delay="300ms">
                <NavLink to="/user/base/profile" className="item">
                    <span>基本资料</span>
                    <img src='/images/row.png' />
                </NavLink>
                {/* <a  className="item">
                    <span>我的名片</span>
                    <img src='/images/row.png' />
                </a> */}
                <div className="item" onClick={logout}>
                    <span>退出登陆</span>
                    <img src="/images/row.png" />
                </div>
            </div>
            <Modal
                className="baseindexmodal"
                content="是否确认退出"
                visible={closeOnAction}
                closeOnAction
                onAction={handleCancelClick}
                actions={[
                    {
                        key: 'cancel',
                        text: '取消',
                    },
                    {
                        key: 'confirm',
                        text: '确认',
                        danger: true,
                    }
                ]}
            >
            </Modal>
        </>
    )
}

export default Baseindex